<template>
  <div class="app-container">
    <el-form :inline="true">
      <el-form-item>
        <el-input v-model="hospitalSetVo.hospitalName" placeholder="医院名称" />
      </el-form-item>
      <el-form-item>
        <el-input v-model="hospitalSetVo.hospitalCode" placeholder="医院编号" />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          @click="getList"
          style="text-align: right"
          >查询</el-button
        >
      </el-form-item>
      <el-form-item>
        <el-button type="danger" icon="el-icon-delete" @click="batchDelete"
          >批量删除</el-button
        >
      </el-form-item>
    </el-form>
    <el-table
      v-loading="listLoading"
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <!--复选框-->
      <el-table-column type="selection" width="55" />
      <el-table-column type="index" label="序号" width="50" />
      <el-table-column align="center" label="医院编号" width="80">
        <template v-slot="scope">
          <span>{{ scope.row.hospitalCode }}</span>
        </template>
      </el-table-column>
      <el-table-column width="120px" align="center" label="医院名称">
        <template v-slot="scope">
          <span>{{ scope.row.hospitalName }}</span>
        </template>
      </el-table-column>
      <el-table-column width="120px" align="center" label="联系人">
        <template v-slot="scope">
          <span>{{ scope.row.contactName }}</span>
        </template>
      </el-table-column>
      <el-table-column width="120px" align="center" label="联系方式">
        <template v-slot="scope">
          <span>{{ scope.row.contactPhone }}</span>
        </template>
      </el-table-column>
      <el-table-column width="180px" align="center" label="创建时间">
        <template v-slot="scope">
          <span>{{ scope.row.createTime }}</span>
        </template>
      </el-table-column>
      <el-table-column width="180px" align="center" label="修改时间">
        <template v-slot="scope">
          <span>{{ scope.row.updateTime }}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="100px" align="center" label="医院官网">
        <template v-slot="{ row }">
          <span>{{ row.apiUrl }}</span>
        </template>
      </el-table-column>
      <el-table-column
        class-name="status-col"
        align="center"
        label="状态  "
        width="110"
      >
        <template v-slot="{ row }">
          <el-tag :type="row.status===0?'success':'danger'">
            {{ row.status === 0 ? "可用" : "不可用" }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column :inlist="true" align="center" label="操作" width="200">
        <template v-slot="scope">
          <el-button
            type="danger"
            size="small"
            icon="el-icon-delete"
            @click="deleteById(scope.row.id)"
          />
          <el-button
            type="info"
            v-if="scope.row.status === 1"
            size="small"
            icon="el-icon-lock"
            @click="setLock(scope.row.id, scope.row.status)"
          />
          <el-button
            type="success"
            v-else
            size="small"
            icon="el-icon-unlock"
            @click="setLock(scope.row.id, scope.row.status)"
          />
          <router-link :to="{name: 'hospitalEdit', params: { id: scope.row.id}}" style="   padding-left: 10px;">
            <el-button type="primary" size="small" icon="el-icon-edit" />
          </router-link>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-sizes="[1, 2, 3, 4, 5]"
      :current-page="listQuery.current"
      :page-size="listQuery.limit"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script  lang="ts">
import {
  fetchList,
  removeById,
  batchRemove,
  lockHospitalSet
} from '/@/api/hospital'
import { ElMessage, ElMessageBox, ElNotification } from 'element-plus'
import { computed, defineComponent, onBeforeMount, onMounted, onUpdated, reactive, toRefs } from 'vue'
interface IStatusMap{//定义接口
  [key: number]: any
}
interface IId{
  id:number
}
export default defineComponent({
  name: 'hospitalDetail',
  setup(){
    const data=reactive({
      multipleSelection: <any>{},
      idList:[] as Array<IId>,
      list: [],
      total: 0,
      listLoading: true,
      listQuery: {
        current: 1,
        limit: 5
      },
      hospitalSetVo: <any>{}
    })
    const setLock =(id:number, status:number)=> {
      var status_p = status === 1 ? 0 : 1
      lockHospitalSet(id, status_p)
        .then((result:any) => {
          if (result.code === 200) {
            ElMessage.info(status_p === 1 ? '已锁定！' : '已解锁！')
            getList()
          } 
        })
        .catch((error) => {
          console.log(error)
        })
    }
    const getList= ()=> {
      data.listLoading = true
      fetchList(
        data.listQuery.current,
        data.listQuery.limit,
        data.hospitalSetVo
      )
        .then((response) => {
          data.list = response.data.records
          data.total = response.data.total
          data.listLoading = false
        })
        .catch((error) => {
          console.log(error)
        })
    }
    const deleteById=(id:number)=>{
      ElMessageBox.confirm('此操作将删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        .then(() => {
          removeById(id).then((result:any) => {
            if (result.code === 200) {
              getList()
            } 
          })
        })
        .catch(() => {
          ElNotification({
            title: '消息',
            message: '已取消删除',
          })
        })
    }
    const batchDelete =()=> {
      ElMessageBox.confirm('此操作将删除所选项, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        .then(() => {
          if (data.multipleSelection.length > 0) {
            data.multipleSelection.forEach((v:any) => {
              data.idList.push(v.id)//使用接口处理
            })
          } else {
            alert('未选中')
            return
          }
          batchRemove(data.idList).then((result:any) => {
            if (result.code === 200) {
              getList()
            } 
          })
        })
        .catch(() => {
          ElNotification({
            title: '消息',
            message: '已取消批量删除',
          })
        })
    }
    const handleSelectionChange=(val:any) =>{
      data.multipleSelection = val
    }
    const handleSizeChange= (val:number)=> {
      data.listQuery.limit = val
      getList()
    }
    const handleCurrentChange=(val:number)=>{
      if (val > 0) {
        data.listQuery.current = val
        getList()
      } else {
        alert('请输入大于0的页码')
      }
    }
    //初始化调用
   
        getList()
   
    // 页面加载时
		// onMounted(() => {
		// 	 getList()
		// });
   
    return{
      ...toRefs(data),
      handleCurrentChange,handleSizeChange,handleSelectionChange,batchDelete,deleteById,getList,setLock
    }
  }
})
</script>

<style scoped>
.edit-input {
  padding-right: 100px;
}
.cancel-btn {
  position: absolute;
  right: 15px;
  top: 10px;
}
</style>
